import React, {
    PureComponent
} from 'react';

import {
    View,
    StyleSheet
} from 'react-native';

interface Props {
    total:number,
    step:number
}

import * as Const from '../../../../const/index';

class Step extends PureComponent<Props> {
    static defaultProps = {
        total:5,
        step:0
    }

    render() {
        const {
            step,
            total
        } = this.props;

        const items = (
            Array.from({length:total})
        ) as Array<any>

        return (
            <View style={styles.container}>
                {items.map((
                    item:any,i:number
                ) => {
                    const _styles = [
                        styles.itemStyle
                    ]

                    const last = (
                        i === items.length-1
                    )

                    if(i <= step) {
                        _styles.push(
                            styles.selected
                        )
                    }

                    if(last) {
                        _styles.push(
                            styles.lastItem
                        )
                    }

                    return (
                        <View style={_styles} key={i}/>
                    )
                })}
            </View>
        )
    }
}

export default Step;

const styles = StyleSheet.create({
    container:{
        flexDirection:`row`,
        paddingVertical:24,
        paddingHorizontal:16,
        backgroundColor:`#fff`,
        borderTopLeftRadius:8,
        borderTopRightRadius:8
    },
    itemStyle:{
        flex:1,
        height:6,
        marginRight:5,
        borderRadius:3,
        backgroundColor:`#f3c6c2`
    },
    selected:{
        backgroundColor:Const.color
    },
    lastItem:{
        marginRight:0
    }
}) as any;